<template>
  <div class="effect" :class="{'has-content': hasContent}">
    <slot name="icon"></slot>
    <input v-model="state.inputValue" class="input" :type="type" />
    <div class="label-text"> <slot></slot></div>
    <!-- <label class="helper-text">helper text</label> -->
    <span class="focus-border"></span>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue'
// 声明触发事件

const props = defineProps({
  type: { type: String, default: 'text' },
  value: { type: String, default: null },
  placeholder: { type: String, default: null },
  readonly: { type: Boolean, default: false },
  disabled: { type: Boolean, default: null },
  min: { type: String, default: null },
  max: { type: String, default: null },
  step: { type: Number, default: null },
  minlength: { type: Number, default: null },
  maxlength: { type: Number, default: null },
  required: { type: Boolean, default: true },
  autocomplete: { type: String, default: null},
  errorMessages: {type: [Array, String], default: null }
})
const emits = defineEmits(['update:value'])
const state = reactive({
  inputValue: computed({ get() {
    return props.value
  }, set(v) {
    emits('update:value', v)
  } }),
  focus: false,
  valid: true
})
const hasContent = computed(() => {
  return state.inputValue !== ''
})

</script>
<style lang="less" scoped>
:focus{outline: none;}
.effect {
  width: 100%; position: relative; /* necessary to give position: relative to parent. */
  padding:30px 5px;
  height: 30px;
  * {
    position: absolute;
  }
  :deep(.anticon) {
    line-height: 30px;position: absolute;color: #700968; font-weight:bolder;font-size: 24px
  }
  .input {
    padding: 2px 30px; line-height: 30px;
    border:0px; border-bottom: 1px solid #ccc; background: transparent; font-weight: 500; z-index: 9;
    font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
  }
  .focus-border{
    bottom: 0px; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;
  }
  .label-text{
    left: 33px; width: 100%; bottom: 5px; color: #aaa; transition: 0.3s; z-index: 0; letter-spacing: 5px; overflow: hidden;
  }

  .input:focus ~ .label-text
  , &.has-content > .label-text{

    left:0; bottom: 36px; font-size: 12px; color: #087df3; transition: 0.3s;
  }
  .input:focus ~ .focus-border
  , &.has-content > .focus-border{width: 100%; transition: 0.4s;}
  .input:focus ~ :deep(.icon){
     color: #087df3;
  }

}
</style>